<template>
  <div id="home">
    <!-- 页面头部 -->
    <nav-bar class="home-navbar">
      <div slot="center">购物街</div>
    </nav-bar>

    <!-- 商品导航栏的复制组件，用于模拟实现导航栏的停留效果 -->
    <tab-control
      class="home-tab-control"
      ref="tabControlCopy"
      v-show="isTabFixed"
      :titles="tabControlTitles"
      @goodsItemClick="goodsItemClick"
    />

    <!-- 页面可滚动区域，使用better-scroll实现 -->
    <scroll
      class="scroll"
      ref="scroll"
      :probeType="3"
      @pagescroll="pagescroll"
      @pullingUp="pullingUp"
    >
      <!-- 轮播图 -->
      <home-swiper :banner="banner" />

      <!-- 商品推荐 -->
      <home-recommend :recommend="recommend" />
      <home-feature />

      <!-- 商品展示 -->
      <tab-control ref="tabControl" :titles="tabControlTitles" @goodsItemClick="goodsItemClick" />
      <goods class="home-goods" :goods="goods[goodsType].list" />
    </scroll>

    <!-- 返回顶部 -->
    <back-top @click.native="backTopClick" v-show="isBackTopShow" />
  </div>
</template>

<script>
  import HomeSwiper from './components/HomeSwiper'
  import HomeRecommend from './components/HomeRecommend'
  import HomeFeature from './components/HomeFeature'

  import NavBar from '@commoncpn/navbar/NavBar'
  import TabControl from '@contentcpn/tabControl/TabControl'
  import Goods from '@contentcpn/goods/Goods'
  import Scroll from '@commoncpn/scroll/Scroll'

  import { getMultiData, getGoodsData } from '@network/home'
  import { itemLoad, backTop } from '@common/mixins'

  export default {
    name: 'Home',

    mixins: [itemLoad, backTop],

    components: {
      NavBar,
      HomeSwiper,
      HomeRecommend,
      HomeFeature,
      TabControl,
      Goods,
      Scroll
    },

    data() {
      return {
        banner: null,
        recommend: null,
        tabControlTitles: ['流行', '新款', '精选'],
        goods: {
          pop: { page: 0, list: [] },
          new: { page: 0, list: [] },
          sell: { page: 0, list: [] }
        },
        goodsType: 'pop',
        isTabFixed: false,
        saveY: 0
      }
    },

    methods: {
      // 获取首页的banner和recommend数据
      getMultiData() {
        getMultiData().then(result => {
          this.banner = result.data.banner.list
          this.recommend = result.data.recommend.list
        })
      },

      // 获取对应type类型的商品数据
      getGoodsData(type, callback) {
        let page = this.goods[type].page + 1
        getGoodsData(type, page).then(res => {
          this.goods[type].list.push(...res.data.list)
          this.goods[type].page++
          callback && callback()
        })
      },

      // 监听商品导航栏的点击，保存当前点击的商品类别选项
      goodsItemClick(index) {
        switch (index) {
          case 0:
            this.goodsType = 'pop'
            break
          case 1:
            this.goodsType = 'new'
            break
          case 2:
            this.goodsType = 'sell'
        }
        this.$refs.tabControl.currentIndex = index
        this.$refs.tabControlCopy.currentIndex = index
      },

      // 监听滚动事件
      pagescroll(position) {
        // 回到顶部按钮的显示与隐藏
        this.showBackTop(position)
        // 商品切换导航栏的固定定位
        this.isTabFixed = -position.y >= this.tabPosition
      },

      // 监听上拉加载事件，加载更多商品数据
      pullingUp() {
        this.getGoodsData(this.goodsType, () => {
          this.$refs.scroll.finishPullUp()
        })
      }
    },

    // 离开首页时记录页面当前坐标，进入时还原该坐标
    activated() {
      this.$refs.scroll.scrollTo(0, this.saveY, 0)
      this.$refs.scroll.refresh()
    },
    deactivated() {
      this.saveY = this.$refs.scroll.getScrollY()
      this.$bus.$off('imgLoad', this.imgLoadListener)
    },

    created() {
      this.getMultiData()
      this.getGoodsData('pop')
      this.getGoodsData('new')
      this.getGoodsData('sell')
    },

    mounted() {
      // 获取tab-control在页面中的坐标，以便页面滚动到某个位置时将其转换为固定定位
      setTimeout(() => {
        this.tabPosition = this.$refs.tabControl.$el.offsetTop
      }, 500)
    }
  }
</script>

<style lang="less" scoped>
  #home {
    height: calc(100vh - 1.5625rem);
    overflow: hidden;
  }

  .home-navbar {
    background-color: var(--color-tint);
    color: #fff;
    font-size: 0.5625rem;
  }

  .home-tab-control {
    position: fixed;
    z-index: 99;
    left: 0;
    right: 0;
  }

  .scroll {
    height: calc(100% - 1.375rem);
  }
</style>
